<template>
  <el-card>
    <div
      slot="header"
      class="card-title"
    >
      <i class="el-icon-menu">
      </i>
      <div>
        子系统管理
      </div>
    </div>
    <div
      class="container"
    >
      <BosssoftTree
        :loading="isLoading"
        :data="treeData"
        @leaf-click="handleLeafClick"
      >
      </BosssoftTree>
    </div>
  </el-card>
</template>

<script>
/**
 * @typedef {{
 *   'label': String,
 *   'value': String,
 * }} Data
 */

import BosssoftTree from '@/components/BosssoftTree.vue'
/**
 * # 子系统管理器
 * 用于按部门、职位或角色对`用户数据表格`的数据进行筛选展示
 */
export default {
  'name': 'SubsystemManager',

  'components': {
    BosssoftTree,
  },

  'props': {
    /**
     * 设置`子系统管理器`的树是否为加载状态
     */
    'isLoading': {
      'default': false,
      'type': Boolean,
    },
    /**
     * `子系统管理器`的树形数据
     * @type {[
     *   {
     *     'children': Data[],
     *     'label': '部门',
     *   },
     *   {
     *     'children': Data[],
     *     'label': '职位',
     *   },
     *   {
     *     'children': Data[],
     *     'label': '角色',
     *   },
     * ]}
     */
    'treeData': {
      'default' () {
        return []
      },
      'type': Array,
    },
  },

  'methods': {
    'handleLeafClick' (path, value) {
      this.$emit('query', path[0], value)
    },
  },
}
</script>

<style scoped lang="scss">
.card-title {
  display: flex;
}
.container {
  overflow-y: auto;
  max-height: 512px;
}
</style>
